.music-list-container {
  width: 100%;
  min-height: 300px;

  &:focus-visible {
    outline: none;
  }

  & th {
    position: relative;

    &:not([data-id="like"]):hover {
      background-color: var(--listHoverColor);

      & .sort-container[data-sorting="false"] {
        opacity: 0.6;
      }
    }

    &:nth-child(2) {
      text-align: center;
    }

    & .sort-container {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.8;

      & svg {
        width: 0.6rem;
        height: 0.6rem;
      }

      &[data-sorting="false"] {
        opacity: 0;
      }
    }
  }

  & tr {
    position: relative;
  }

  & td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:nth-child(2) {
      text-align: center;
    }
  }

  & .music-list-operations {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  // & .resizer {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  //   height: 100%;
  //   width: 4px;
  //   cursor: col-resize;
  //   user-select: none;
  //   touch-action: none;
  //   opacity: 0;

  //   &:hover {
  //     opacity: 1;
  //   }
  // }

  // & .resizer-resizing {
  //   opacity: 1;
  // }
}

.music-list-drag-receiver {
  position: absolute;
  left: 0;
  height: 12px;
  width: 100%;
  display: flex;
  align-items: center;

  & .music-list-drag-receiver-content {
    width: 100%;
    height: 2px;
    background-color: var(--primaryColor);
    pointer-events: none;
  }
}

.music-list-drag-receiver-top {
  top: -6px;
}

.music-list-drag-receiver-bottom {
  bottom: -6px;
}
